<template>
    <div class="bom-list-container">
        <!-- 顶部操作栏 -->
        <div class="top-action-bar">
            <el-button type="primary">新增</el-button>
            <el-button>修改</el-button>
            <el-button>过滤</el-button>
            <el-button>打印</el-button>
            <el-button>导入</el-button>
            <el-button>导出</el-button>
            <el-button>查看日志</el-button>
            <el-button>设计</el-button>
        </div>

        <!-- 搜索过滤区 -->
        <el-form :model="searchForm" class="search-form">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="清单主题：">
                        <el-input v-model="searchForm.title" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="清单编号：">
                        <el-input v-model="searchForm.code" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="产品名称：">
                        <el-input v-model="searchForm.product" placeholder="请选择或输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="添加人员：">
                        <el-select v-model="searchForm.creator" placeholder="请选择或输入" clearable filterable>
                            <el-option label="admin" value="admin" />
                            <el-option label="ncadmin" value="ncadmin" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="添加日期：">
                        <el-date-picker v-model="searchForm.date" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" />
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" style="margin-left:15px">查询</el-button>
                </el-col>
            </el-row>
        </el-form>

        <!-- 数据表格 -->
        <el-table :data="tableData" border style="width: 100%" highlight-current-row>
            <el-table-column type="selection" width="55" />
            <el-table-column label="序号" prop="index" width="60" />
            <el-table-column label="物料清单主题" prop="title" min-width="180">
                <template #default="{ row }">
                    {{ row.title || '-' }}
                </template>
            </el-table-column>
            <el-table-column label="物料清单编号" prop="code" width="180" />
            <el-table-column label="主辅清单" prop="type" width="100">
                <template #default="{ row }">
                    <el-tag v-if="row.type" size="small">{{ row.type }}</el-tag>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="产品名称" prop="product" min-width="150">
                <template #default="{ row }">
                    {{ row.product || '-' }}
                </template>
            </el-table-column>
            <el-table-column label="制单日期" prop="date" width="120" />
            <el-table-column label="制单人员" prop="creator" width="120" />
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrapper">
            <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="100" :page-size="10"
                :current-page="1" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

// 搜索表单数据
const searchForm = ref({
    title: '',
    code: '',
    product: '',
    creator: '',
    date: []
})

// 表格数据（根据图片示例数据生成）
const tableData = ref([
    { index: 1, title: '然后我', code: 'WQLD2025030013', type: '辅', product: '', date: '2025-03-26', creator: 'admin' },
    { index: 2, title: '轮胎', code: 'WLOD2025030012', type: '辅', product: '卫龙大辣棒', date: '2025-03-26', creator: 'admin' },
    { index: 3, title: '物料清单-戴戴', code: 'WLOD2025030011', type: '辅', product: '商务车', date: '2025-03-26', creator: 'admin' },
    { index: 4, code: 'WLOD2025030010', type: '辅', product: '', date: '2025-03-26', creator: 'admin' },
    { index: 5, title: '物料清单主题1', code: 'WLOD2025030009', type: '辅', product: 'admin', date: '2025-03-24', creator: 'admin' },
    { index: 6, title: '测试2', code: 'WLOD2025030008', type: '辅', product: '', date: '2025-03-23', creator: 'ncadmin' },
    { index: 7, title: '测试', code: 'WLOD2025030007', type: '辅', product: '陶瓷', date: '2025-03-23', creator: '辅' },
    { index: 8, code: 'WLOD2025030006', type: '辅', product: '辅导2025030006', date: '2025-03-23', creator: '辅' },
    { index: 9, title: '玛雅橡胶', code: 'WLOD2025030005', type: '辅', product: '辅', date: '2025-03-23', creator: 'admin' }
])

// 分页处理
const handleSizeChange = (val) => {
    console.log('每页条数:', val)
}
const handleCurrentChange = (val) => {
    console.log('当前页:', val)
}
</script>

<style scoped>
.bom-list-container {
    padding: 20px;
    background: #fff;
}

.top-action-bar {
    margin-bottom: 20px;
}

.top-action-bar .el-button {
    margin-right: 10px;
}

.search-form {
    padding: 20px;
    background: #f5f7fa;
    margin-bottom: 20px;
    border-radius: 4px;
}

.search-form .el-form-item {
    margin-bottom: 0;
}

.pagination-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.el-table {
    margin-top: 15px;
}

.el-table :deep(.el-table__cell) {
    padding: 12px 0;
}

.el-tag {
    background-color: #f4f4f5;
    border-color: #e9e9eb;
    color: #909399;
}
</style>